<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<div class="mui-navbar-inner mui-bar mui-bar-nav">
			<h1 class="mui-center mui-title">我的收藏</h1>
		</div>
		<div class="mui-content" id="form1">
			<!--<div class="mui-card">
				<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(../images/cbd.jpg)"></div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>Posted on January 18, 2016</p>
						<p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>
					</div>
				</div>
				<div class="mui-card-footer">
					<a class="mui-card-link">Like</a>
					<a class="mui-card-link">Read more</a>
				</div>
			</div>-->
			
			<div class="mui-card" v-for="content in item.contentlist">
				<div class="mui-card-header" v-html="content.title">
				</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner mui-navigate-right" style="background:no-repeat;" @tap="openDetail(content)">
						<img v-bind:src="content.img" style="width:100%;display:inline-block;height:auto;" />
						<p style="color: #333;" v-html="content.desc">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>
					</div>
				</div>
				<div class="mui-card-footer">
					<a class="mui-icon-extra mui-icon-extra-share" style="font-size:large;">分享</a>
					<a class="mui-icon-extra mui-icon-extra-heart-filled" style="font-size:large;" @tap="delContent(content)">删除</a>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
		<script type="text/javascript" src="../js/shiquan.js" ></script>
		<script type="text/javascript">
			mui.init();
			var vue = new Vue({
				el: '#form1',
				data:{
					item:{
						"maxResult": "10",
						"contentlist": [{
				          "link": "/dp/52305.html",
				          "img": "https://www.guidaye.com/images/img/175.jpg",
				          "desc": "段青岩乃钧州东十里人氏，生性聪慧，自幼苦读，却连着两回乡试落榜，这年又东拼西凑，好歹弄了些资川，恰逢母亲又病倒床榻，照顾母亲痊愈之后，急匆匆省城赴考。时值八月，天气不甚炎热，途经固县时，段青岩为节约行...",
				          "title": "易城隍"
				        }]
					}
				}
			});
			var ws=null;
			mui.plusReady(function(){
				ws=plus.webview.currentWebview();
				ws.setPullToRefresh({support:true,
					height:'50px',
					range:'200px',
					contentdown:{
						caption:'下拉可以刷新'
					},
					contentover:{
						caption:'释放立即刷新'
					},
					contentrefresh:{
						caption:'正在刷新...'
					}
				},dataload);
				
				dataload();
			});
			// 刷新页面
			function dataload(){
				setTimeout(function(){
					var list = shiquan.getContentList();
					vue.item.contentlist = list;
					ws.endPullToRefresh();
				},1000);
			}
			function openDetail(content){
				console.log("link="+content.link);
				mui.openWindow("detail.html","detail",{
					extras:{link:content.link}
				});
			}
			
			function delContent(content){
				
				plus.nativeUI.confirm("确认删除所选择的故事？",function(e){
					if(e.index != 0)
						return;
					vue.item.contentlist = shiquan.delContent(content);
					plus.nativeUI.toast("删除成功！");
				});
			}
		</script>
	</body>

</html>